<!--
 * @Author: wankong
 * @Desc: 
 * @Date: 2021-10-16 15:19:36
 * @LastEditTime: 2021-10-19 19:03:38
-->
<template>
  <div class="user">
    <el-form
      :model="userInfo"
      class="userform"
      :rules="UserRules"
      ref="userRefs"
      label-width="100px"
    >
      <el-form-item label="用户名" prop="username">
        <el-input v-model="userInfo.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          v-model="userInfo.password"
          placeholder="不修改请留空"
        ></el-input> </el-form-item
      ><el-form-item label="昵称" prop="nickname">
        <el-input
          v-model="userInfo.nickname"
          placeholder="显示出来的昵称"
        ></el-input> </el-form-item
      ><el-form-item label="头像" prop="avatar">
        <el-input
          v-model="userInfo.avatar"
          placeholder="头像图片地址"
        ></el-input> </el-form-item
      ><el-form-item>
        <el-button type="primary" @click="changeUser()"> 修改</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        username: "",
        password: "",
        nickname: "",
        avatar: "",
      },
      UserRules: {
        username: { required: true, message: "请输入账号", trigger: "blur" },
        nickname: { required: true, message: "请输入账号", trigger: "blur" },
        avatar: { required: true, message: "请输入账号", trigger: "blur" },
      },
    };
  },
  methods: {
    async getUserInfo() {
      const res = await this.$http.get(`${this.adminPre}/user`);
      this.userInfo = res.data;
    },
    changeUser() {
      this.$refs.userRefs.validate(async (valid) => {
        if (!valid) return;
        const res = await this.$http.post(
          `${this.adminPre}/user`,
          this.userInfo
        );
        if (res.code == 200) {
          this.$message.success("修改成功！您可能需要重新登录");
          this.getUserInfo();
        } else {
          this.$message.error("修改失败！");
        }
      });
    },
  },
  created() {
    this.getUserInfo();
  },
};
</script>

<style lang="less" scoped >
.userform {
  width: 50%;
}
</style>
